<template>
    <div class="products-color-slider">
        <div class="results-row clearfix">
            <div class="results-state">
                <div class="label">Available colors
                    <strong v-text="items.colors_count"></strong>
                </div>
            </div>
            <div class="results variant-slider">
                <ul class="list-inline">
                    <li v-for="slider in items.sliders" :key="slider.colorTitle" :class="{'active':slider.selected}">
                        <router-link :to="'/product/view/'+jumpUrl(slider.product_name)" :title="slider.colorTitle">
                            <img class="img-responsive" :src="slider.image_path">
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import mixin from '../../mixin'
export default {
    mixins: [mixin],
    props: ['items']
}
</script>
<style>
.products-color-slider .variant-slider {
    float: left;
    padding-top: 4px;
    margin-left: 10px;
}

.products-color-slider .results-row {
    position: relative;
    z-index: 14;
    margin-bottom: 20px;
    padding-top: 20px;
}

.products-color-slider .results-state {
    padding: 5px 5px 5px 0;
    margin-right: 5px;
    font-size: 12px;
    color: #686868;
}

@media (max-width: 991px) {
    .products-color-slider {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3;
    }
    .products-color-slider .results-row {
        padding-top: 40px;
    }
}

@media (min-width: 768px) {
    .products-color-slider .results-state {
        float: left;
        width: 60px;
        border-right: 1px solid #d8d8d8;
    }
}
</style>
